import QtQuick
import QtQuick.Controls
import ToolkitConstants 1.0
import Main 1.0
import QtQml
import content 1.0
import QtQuick.Layouts
import 'tooltype.js' as ToolType


ApplicationWindow {
    id: root_window
    title: "AlexTookit"
    width: Constants.width
    height: Constants.height

    Component.onCompleted: {
        visible = true;
        tools_model.append({title:"Detector", type: ToolType.HostDetector, maxCount: 1 })
        tools_model.append({title:"SerialPort", type: ToolType.SerialPort, maxCount: 100})
        tools_model.append({title:"SSH", type: ToolType.SSH, maxCount: 100})
        tools_model.append({title:"MowerMgr", type: ToolType.MowerMgr, maxCount: 1} )
    }


    AlexToolkit {
        id: alexToolkit
    }

    ListModel {
        id: tools_model
    }

    // 标签页数据模型
    ListModel {
        id: tabModel
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0
        // 顶部控制栏
        RowLayout {
            Layout.fillWidth: true
            spacing: 10
            Repeater {
                model: tools_model
                delegate: Button {
                    text: model.title
                    onClicked: {
                        tabModel.append({
                            title: model.title,
                            type: model.type,
                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 0.3).toString()
                        });
                        tabBar.currentIndex = tabModel.count - 1;
                    }
                }
            }
        }

        // 可拖拽的TabBar
        TabBar {
            id: tabBar
            Layout.fillWidth: true
            Repeater {
                model: tabModel
                delegate: TabButton {
                    id: tabButton
                    text: title
                    width: 100 // implicitWidth
                    padding: 15

                    // 拖拽相关属性
                    property bool dragged: false
                    property int target_x: 0

                    MouseArea {
                        anchors.fill: parent
                        drag.target: tabButton.dragged ? tabButton : undefined
                        drag.axis: Drag.XAxis
                        drag.minimumX: -tabButton.width/2
                        drag.maximumX: tabBar.width - tabButton.width

                        onPressed: {
                            tabButton.dragged = true
                            tabBar.currentIndex = index
                            target_x = tabButton.x
                            console.log(index)
                        }

                        onReleased: {
                            tabButton.dragged = false
                            // 计算拖拽后应该插入的位置
                            if (tabButton.x !== target_x) {
                                tabButton.x = target_x
                            }

                        }

                        onPositionChanged: {
                            if (tabButton.dragged) {
                                // 实时更新其他标签的位置
                                for (var i = 0; i < tabModel.count; ++i) {
                                    if (i !== index) {
                                        var otherTab = tabBar.itemAt(i)
                                        var otherCenter = otherTab.x + otherTab.width / 2
                                        var thisCenter = tabButton.x + tabButton.width / 2

                                        if ((index < i && thisCenter > otherCenter) ||
                                            (index > i && thisCenter < otherCenter)) {
                                            target_x = otherTab.x
                                            tabModel.move(index, i, 1)
                                            break
                                        }
                                    }
                                }
                            }
                        }
                    }

                    // 拖拽时的动画效果
                    Behavior on x {
                        enabled: !tabButton.dragged
                        NumberAnimation { duration: 100 }
                    }

                    // tab上的关闭按钮
                    Button {
                        anchors.right: parent.right
                        anchors.verticalCenter: parent.verticalCenter
                        height: 25
                        width: height
                        text: 'x'
                        background: Item {}
                        onClicked: {
                            if (tabModel.count > 0) {
                                tabModel.remove(index)
                            }
                        }
                    }
                }
            }
        }

        // 内容区域
        SwipeView {
            id: swipeView
            Layout.fillWidth: true
            Layout.fillHeight: true
            currentIndex: tabBar.currentIndex

            Repeater {
                model: tabModel
                delegate: tab_view
            }
        }

        StackLayout {
            id: stackLayout
    
            visible: !swipeView.visible
            Layout.fillWidth: true
            Layout.fillHeight: true
            currentIndex: tabBar.currentIndex
            Repeater {
                model: tabModel
                delegate: tab_view
            }
        }
    }

    Component {
        id: tab_view
        Loader {
            Component.onCompleted: {
                switch (model.type) {
                case ToolType.HostDetector:
                    sourceComponent = hostDetect
                    break
                case ToolType.SerialPort:
                    sourceComponent = serialPortTool
                    break
                case ToolType.SSH:
                    sourceComponent = sshTool
                    break
                case ToolType.MowerMgr:
                    sourceComponent = mowerMgrTool
                    break
                }
            }
        }
    }

    Component {
        id: serialPortTool
        SerialPortTool {}
    }

    Component {
        id: sshTool
        SshTool {}
    }

    Component {
        id: hostDetect
        HostDetector {}
    }

    Component {
        id: mowerMgrTool
        MowerMgr {}
    }
}
